<template>
	<view>
		<view class="mian">
			<view class="cu-form-group">
				<!-- <view class="title">单据编号：{{checkdata.BillNo}}</view> -->
				<view class="title">选打印机：</view>
				<input placeholder="点击选择" disabled="true" value="ESC标准">
			</view>
			<view class="cu-form-group" style="border-bottom: 0.5px solid #eee;">
				<!-- <view class="title">单据编号：{{checkdata.BillNo}}</view> -->
				<view class="title">单据类型：</view>
				<input placeholder="点击选择" disabled="true" :value="SelectBillName.BillName" data-target="StoreModal" @tap="showModal" >
				<button class="addListBt" @tap="add()">增加</button>
			</view>
			<view class="table">
				<view class="tabbars" :class="active==index?'active':'bluractive'" @tap="checkd(index)" v-for="(item,index) in tab"
				 :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="orderList" :style="{height: orderListHeight + 'px'}">
			<view class="orderNav" :style="{width:tdAllWidth+'px'}">
				<text :style="{width:tdWidth[0]+'px'}">序号</text>
				<text :style="{width:tdWidth[1]+'px'}">序号</text>
				<text :style="{width:tdWidth[2]+'px'}">行号</text>
				<text :style="{width:tdWidth[3]+'px'}">间隔</text>
				<text :style="{width:tdWidth[4]+'px'}">标签内容</text>
				<text :style="{width:tdWidth[5]+'px'}">绑定列</text>
				<text :style="{width:tdWidth[6]+'px'}">类型</text>
				<text :style="{width:tdWidth[7]+'px'}" v-if="active==2">汇总</text>
			</view>
			<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
				<view class="orderItem" v-for="(item,index) in orderList" :class="[{'background':!(index%2==0)}]" :key="index" @tap="changeOldData(index)">
					<view :style="{width:tdWidth[0]+'px'}">{{index+1}}</view>
					<view :style="{width:tdWidth[1]+'px'}">{{item.RowNum}}</view>
						<!-- <radio  :checked="index == checkindex" @click.stop="radiocheck(index)" /> -->
					<view :style="{width:tdWidth[2]+'px'}">{{item.X}}</view>
					<view :style="{width:tdWidth[3]+'px'}">{{item.Y}}</view>
					<view :style="{width:tdWidth[4]+'px'}">{{item.LabText}}</view>
					<view :style="{width:tdWidth[5]+'px'}">{{item.DataName}}</view>
					<view :style="{width:tdWidth[6]+'px'}">{{item.PrintType}}</view>
					<view :style="{width:tdWidth[7]+'px'}" v-if="active==2">{{item.IsSum}}</view>
				</view>
			</view>
<!-- 			<view class="allPrice" :style="{width:tdAllWidth+'px'}" style="display: none;">
				<text :style="{width:tdWidth[0]+'px'}">
					小计
				</text>
				<text :style="{width:tdWidth[1]+'px'}">
				</text>
				<text :style="{width:tdWidth[2]+'px'}">
				</text>
				<text :style="{width:tdWidth[3]+'px'}">
				</text>
				<text :style="{width:tdWidth[4]+'px'}">
				</text>
				<text :style="{width:tdWidth[5]+'px'}">
				</text>
				<text :style="{width:tdWidth[6]+'px'}">
				</text>
			</view> -->
		</view>
		<view class="cu-modal" :class="modalName=='StoreModal'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">请选择单据类型</view>
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view class="padding-xl">
		<!-- 					<view class="searchStore">
								<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
								<button @tap="searchStore">搜索</button>
							</view> -->
							<view class="StoreListWrap">
								<view v-for="(item,index) in TempStoreList" :key="item.BillType" @tap="selectStore(index)">{{item.BillName}}</view>
							</view>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	import * as Api from '@/syApis/sySet/sySet.js'
	export default {
		data() {
			return {
				tab: [{
						name: '页头',
						index: 0
					},
					{
						name: '商品明细',
						index: 1
					},
					{
						name: '页尾',
						index: 2
					}
				],
				SelectBillName:{
					BillName:"",
					BillType:""
				},
				TempStoreList:[],//单据类型选择框
				active: 0,
				orderListHeight: 0,
				orderLiHeight: 0,
				orderList: [],
				tdWidth: [50, 60, 125, 125, 125, 125, 125,125],
				tableList: [],
				modalName:""
			}
		},
		onLoad() {
			this.SelectBillType();
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				if(this.active!=2){
					tdAllWidth = tdAllWidth-this.tdWidth[this.tdWidth.length-1] - 1;
				}
				return tdAllWidth;
			}
		},
		//页面加载完成获取高度
		onReady() {
			var that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let main = uni.createSelectorQuery().select(".mian");
					main.boundingClientRect(function(data) { //data - 各种参数
						console.log(data);
						that.orderListHeight = res.windowHeight - data.height;
						that.orderLiHeight = (res.windowHeight - data.height) - 40;
					}).exec()
				}
			});
		},
		onShow(){
			if(this.active==0){
				this.Select_MasterPrintFormat();
			}else if(this.active==1){
				this.Select_SlavePrintFormat();
			}else{
			    this.Select_TableFootPrintFormat();	
			}
		},
		methods: {
			changeOldData(index){
				uni.navigateTo({
					url:'./ReceiptsAdd?BillType='+this.SelectBillName.BillType+"&PrinterType=ESC标准&type="+this.active+"&isChange=0&OldData="+ JSON.stringify(this.orderList[index])
				})
			},
			checkd: function(e) {
				console.log(e);
				this.active = e;
				if(e==0){
					this.Select_MasterPrintFormat();
				}else if(e==1){
					this.Select_SlavePrintFormat();
				}else{
				    this.Select_TableFootPrintFormat();	
				}
			},
			add(){
				if(this.SelectBillName.BillType==""){
					Api.showTip("请先选择单价名称");
					return;
				}
				uni.navigateTo({
					url:'./ReceiptsAdd?BillType='+this.SelectBillName.BillType+"&PrinterType=ESC标准&type="+this.active
				})
			},
			SelectBillType(){
				let that = this;
				Api.Select_BillType({},function(res){
					if(res.state){
						if(res.data.ErrorMsg!=""){
							
						}else{
							that.TempStoreList = res.data.ResultMsg;
							that.SelectBillName =  res.data.ResultMsg[0];
							that.Select_MasterPrintFormat();
						}
					}
				})
			},
			Select_MasterPrintFormat(){
				let data = {
					BillType:this.SelectBillName.BillType,
					PrinterType:"ESC标准"
				}
				var that = this;
				Api.Select_MasterPrintFormat(data,function(res){
					if(res.state){
						if(res.data.ErrorMsg!=""){
							
						}else{
							that.orderList = res.data.ResultMsg;
						}
					}else{
						
					}
				});
			},
			Select_SlavePrintFormat(){
				let data = {
					BillType:this.SelectBillName.BillType,
					PrinterType:"ESC标准"
				}
				var that = this;
				Api.Select_SlavePrintFormat(data,function(res){
					if(res.state){
						if(res.data.ErrorMsg!=""){
							
						}else{
							that.orderList = res.data.ResultMsg;
						}
					}else{
						
					}
				});
			},
			Select_TableFootPrintFormat(){
				let data = {
					BillType:this.SelectBillName.BillType,
					PrinterType:"ESC标准"
				}
				var that = this;
				Api.Select_TableFootPrintFormat(data,function(res){
					 if(res.state){
					 	if(res.data.ErrorMsg!=""){
					 		
					 	}else{
					 		that.orderList = res.data.ResultMsg;
					 	}
					 }else{
					 	
					 }
				});
			},
			selectStore(index){
				this.SelectBillName = this.TempStoreList[index];
				this.modalName = "";
				if(this.active==0){
					this.Select_MasterPrintFormat();
				}else if(this.active==1){
					this.Select_SlavePrintFormat();
				}else{
				    this.Select_TableFootPrintFormat();	
				}
			},
			showModal(e){
				console.log(e);
				this.modalName = e.target.dataset.target
			},
			hideModal(){
				this.modalName = "";
			}
		}
	}
</script>
<style lang="scss">
	page {
		padding-bottom: 0px;
	}

	.cu-form-group {
		height: 80upx !important;
		line-height: 80upx !important;

		button{
			padding-left: 15upx;
			padding-right: 15upx;
			margin-top: 10upx;
			height: 60upx;
			line-height: 60upx;
			background: #7CAAD8;
			color: #FFF;
			font-size: 24upx;
		}
	}
	.table {
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		box-shadow: 0 5px 5px rgba(59, 65, 94, 0.1);
	}

	.tabbars {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		margin: 5px;
		/* color: #fff; */
		/* padding: 5px 10px; */

	}

	.active {
		margin: 5px;
		/* background-color: red; */
		background-color: #7CAAD8;
		// border: 0.5px solid #007AFF;
		border-radius: 3px;
		color: #fff;
		box-shadow: 0 5px 5px rgba(59, 65, 94, 0.1);
	}

	.active:before {
		content: '';
		background-color: red;
		position: absolute;
		top: 50px;
		left: 50px;
		display: block;
	}

	.bluractive {
		border: 0.5px solid rgb(200, 200, 200);
		border-radius: 3px;
		box-shadow: 0 0px 10px rgba(59, 65, 94, 0.1);
	}

	//表格单据
	.orderList {
		width: 100%;
		overflow: auto;
		box-sizing: border-box;

		text {
			float: left;
			text-align: center;
			box-sizing: border-box;
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #CCC;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			&:last-child {
				border: none;
			}
		}

		.orderNav {
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			overflow: hidden;
			border-top: 1px solid #CCC;
			border-left: 1px solid #FFF;
			background: #FFF;

		}

		.orderLi {

			background: #ebebeb;
			overflow: auto;

			.orderItem {
				height: 40px;
				line-height: 40px;
				width: 100%;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				display: table;
				border-bottom: 1px solid #CCCCCC;

				view {
					display: inline-block;
					height: 100%;
					line-height: 35px;
					float: left;
					text-align: center;
					border-right: 1px solid #CCC;
					box-sizing: border-box;
					padding-top: 5upx;
					padding-bottom: 5upx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					image {
						width: 60px;
						margin: auto;
						display: table;
					}

					&:last-child {
						border: none;
					}

				}
			}
		}

		.allPrice {
			@extend .orderNav;
			background: rgba(124, 170, 216, 1);
			color: #FFF;
		}

		.background {
			background-color: #fff;
		}
	}
	
	
	/* 弹框样式 */
	 .padding-xl .searchStore {
	 	display: flex;
	 	width: 100%;
	 	margin: auto;
	 	height: 45px;
	 	padding-top: 5px;
	 	font-size: 14px;
	 }
	
	 .padding-xl .searchStore input {
	 	flex: 1;
	 	height: 35px;
	 	border: 1px solid #CCC;
	 	border-top-left-radius: 5px;
	 	border-bottom-left-radius: 5px;
	 	padding-left: 10px;
	 }
	
	 .padding-xl {
	 	padding: 10px;
	
	 }
	
	 .padding-xl .searchStore button {
	 	font-size: 14px;
	 	color: #FFF;
	 	padding-left: 8px;
	 	padding-right: 8px;
	 	height: 35px;
	 	line-height: 35px;
	 	border-radius: 0px;
	 	border-top-right-radius: 5px;
	 	border-bottom-right-radius: 5px;
	 	text-align: center;
	 	background: rgba(124, 170, 216, 1);
	 }
	
	 .padding-xl .StoreListWrap {
	 	height: 250px;
	 	overflow: auto;
	 }
	
	 .padding-xl .StoreListWrap view {
	 	height: 40px;
	 	line-height: 40px;
	 	text-align: left;
	 	border-bottom: 1px solid #CCC;
	 	padding-left: 8px;
	 }
	
	 .cu-form-group {
	 	padding: 1px 10px !important;
	 	height: 40px;
	 	line-height: 40px;
	 	min-height: 40px;
	 }
	
	 /* 表头 */
	 .tabHeader {
	 	width: 100%;
	 	height: 200px;
	 	overflow: hidden;
	 	position: relative;
	 	padding-bottom: 40px;
	 }
	
	 .tabHeader.tabHeaderMore {
	 	width: 100%;
	 	display: table;
	 }
	
	 .inpt1 {
	 	text-align: left;
	 }
	
	 /* 查看更多按钮 */
	 .lookHeaderMore {
	 	width: 100%;
	 	position: absolute;
	 	bottom: 0px;
	 	left: 0px;
			z-index: 100;
	 }
	
	.nowGoodCount {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding-left: 5%;
		background: #FFF;
		display: flex;
		position: fixed;
		bottom: 0px;
		left: 0px;
		border-top: 1px solid #CCC;
		z-index: 999;
		background: rgba(124, 170, 216, 1);
		color:#FFF;
	}
	.nowGoodCount view {
		flex: 1;
		box-sizing: border-box;
	}
	
	 /* 返回顶部按钮 */
	 .quiteTop {
	 	width: 50px;
	 	height: 50px;
	 	padding-top: 5px;
	 	line-height: 20px;
	 	background: rgba(0, 0, 0, .8);
	 	border-radius: 25px;
	 	text-align: center;
	 	font-size: 12px;
	 	position: fixed;
	 	bottom: 20px;
	 	right: 10px;
	 	z-index: 999;
	 	color: #FFF;
	 }
		.picker{
		   text-align: left !important;	
		}
		
	 .red{
			color: red;
		}
		.padding-xl .GoodsListWrap {
			height: 250px;
			overflow: auto;
		}
		
		.padding-xl .GoodsListWrap view {
			height: 40px;
			padding: 3px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 5px;
		}
		
		.padding-xl .GoodsListWrap view image {
			width: 40px;
			height: 40px;
		}
		
		.padding-xl .GoodsListWrap view text {
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: left;
			padding-left: 10px;
			box-sizing: border-box;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
</style>
